{% extends "layout/public.html" %}

{% block title %}首页{% endblock %}

{% block head %}
<style>
    /*上传区域*/
    .before-upload-area {
        position: absolute;
        left: 50%;
        top: 25%;
        transform: translate(-50%, -25%);
    }
    .layui-upload-area {
        border-radius: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .layui-upload-drag {
        background-color: transparent;
        padding: 20px;
    }
    .layui-upload-drag:hover {
        border:1px dotted #999;
    }
    /*上传表格*/
    table, tbody, tr, td {
        margin: 0;
        padding: 0;
        border: 0;
        border-spacing: 0;
    }
    .a { width: 55px; }
    .b { text-align:left; }
    .c { max-width: 50px; }
    .d { max-width: 50px; }
    .e { max-width: 80px; }
    .f { max-width: 150px; min-width: 80px; }
    .g { max-width: 80px; }
    .layui-layout-admin .layui-footer {
        line-height: initial;
        padding: 0;
    }
</style>
{% endblock %}

{% block content %}
        <div class="before-upload-area">{{ g.site.upload_beforehtml|safe }}</div>
        <div class="layui-upload-area">
            <div class="layui-upload-drag" id="upload">
                <i class="layui-icon layui-icon-upload"></i>
                <p>点击上传，或将文件拖拽到此处<br>允许图片{{ (g.site.upload_exts or 'jpg|png|gif|bmp|jpeg|webp').split('|')|join(',') }}</p>
            </div>
            <div class="layui-upload-list">
                <button type="button" class="layui-btn layui-btn-xs layui-hide" id="action">开始上传</button>
                <table class="layui-table layui-hide" lay-size="sm">
                    <thead>
                        <tr>
                            <th class="a">预览</th>
                            <th class="b">文件</th>
                            <th class="c">大小(KB)</th>
                            <th class="d">状态</th>
                            <th class="e">进度</th>
                            <th class="f">相册</th>
                            <th class="g">操作</th>
                        </tr>
                    </thead>
                    <tbody id="previewList"></tbody>
                </table>
            </div>
        </div>
{% endblock %}

{% block script %}
{% include "ref/upload_show.html" %}
<script>
    layui.use(['picbed', 'layer', 'upload', 'laytpl', 'element'], function () {
        var $ = layui.jquery,
            picbed = layui.picbed,
            layer = layui.layer,
            upload = layui.upload,
            laytpl = layui.laytpl,
            element = layui.element;
        var exts = "{{ g.site.upload_exts or 'jpg|png|gif|bmp|jpeg|webp' }}",
            size = parseFloat("{{ g.site.upload_size or 10 }}"), //MB
            number = parseInt("{{ g.site.upload_number or 10 }}"),
            upviewDom = $('#previewList');
        var uploadListIns = upload.render({
            elem: '#upload',
            url: '{{ url_for("api.upload") }}',
            method: 'POST',
            data: {album: "{{ request.args.album }}"},
            accept: 'images',
            exts: exts,
            multiple: true,
            auto: false,
            bindAction: '#action',
            drag: true,
            field: "picbed",
            number: number > 10 ? 10 : number,
            size: (size > 10 ? 10 : size) * 1024,
            updateData: function(index, data) {
                //改源码upload.js
                //typeof options.updateData === 'function' &&  options.updateData(index, options.data);
                data.album = $("#album-" + index).val();
            },
            choose: function(obj){
                $(".before-upload-area").hide();
                var files = this.files = obj.pushFile();
                $("#action").removeClass("layui-hide");
                $(".layui-table:first").removeClass("layui-hide");
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td class="a"><img src="'+ result +'" style="max-width:50px" class="layui-upload-img"></td>'
                        ,'<td class="b">'+ (picbed.isMobile ? file.type.replace(/^image\//, '') : file.name) +'</td>'
                        ,'<td class="c">'+ (file.size/1024).toFixed(1) +'</td>'
                        ,'<td class="d">等待</td>'
                        ,'<td class="e"><div id="progress-' + index + '"></div></td>'
                        ,'<td class="f">{% if g.signin %}<input type="text" id="album-' + index + '" autocomplete="off" class="layui-input" value="{{ request.args.album }}">{% else %}<i class="layui-icon layui-icon-close"></i>{% endif %}</td>'
                        ,'<td class="g">'
                        ,'<button class="layui-btn layui-btn-xs upload-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger upload-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));
                    //单个重传
                    tr.find('.upload-reload').on('click', function(){
                        obj.upload(index, file);
                    });
                    //删除
                    tr.find('.upload-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = '';
                    });
                    upviewDom.append(tr);
                });
            },
            before: function(obj){
                if (Object.keys(this.files).length === 0) {
                    layer.msg("暂无图片等待上传！", {icon:1});
                }
            },
            progress: function(index, v){
                //改源码upload.js
                //options.progress(index, percent, options.item[0], e)
                $('#progress-' + index).text(v + '%');
            },
            done: function(res, index, upload){
                console.log(res);
                if(res.code === 0){ //上传成功
                    var tr = upviewDom.find('tr#upload-'+ index),tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">成功</span>');
                    tds.eq(6).html('<button class="layui-btn layui-btn-xs layui-btn-normal upload-show" data-index="' + index + '">查看</button>'); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    //layer.closeAll('loading');
                    tr.find('.upload-show').on('click', function(){
                        laytpl(upload_show_tpl.innerHTML).render(res, function(html){
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: true,
                                area: document.body.clientWidth > 550 ? '550px' : 'auto',
                                maxHeight: '500px',
                                shade: 0.1,
                                shadeClose: true,
                                skin: 'layui-layer-molv',
                                content: html,
                                success: function(layero, indexo) {
                                    element.render('tab');
                                    $(layero).find('.upload_show_copy').on('click', function() {
                                        var copyId = $(this).data('copyid');
                                        picbed.Clipboard.copy($(copyId).text());
                                    });
                                }
                            });
                        });
                    });
                    return;
                } else {
                    this.error(index, upload, res.msg);
                }
            },
            error: function(index, upload, err_msg){
                var tr = upviewDom.find('tr#upload-'+ index),tds = tr.children();
                tds.eq(3).html('<span style="color: #FF5722;"><abbr title="' + err_msg + '">失败</abbr></span>');
                tds.eq(6).find('.upload-reload').removeClass('layui-hide'); //显示重传
                //layer.closeAll('loading');
            }
        });
    });
</script>
{% endblock %}